页面
后面代码请自己复制到下面调试框中相应位置查看。
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
OH YES！甚至无需设置宽度就自适应分辨率。
咦，色块没贴边。简单，样式表中加上：
body
{
margin: 0;
}
第一个不兼容问题出现，IE、Mozilla正常，Opera依旧不贴边，想了想，在body中添加 padding: 0; 一试，成功。愉快。
热完身，打开设计稿，开始研究。
页头到阴影前为止，因为要在程序中包含。先攻页头。
我需要页头两边自适应分辨率，自然需要嵌套居中的770DIV，这里就有选择：（导航下的白色背景是一个很淡的渐变，显然不能用背景色）
1、包括阴影从上到下四个DIV，然后1和3号分别嵌套一个居中的DIV放置‘LOGO’和导航。
2、两个DIV，因为阴影得平铺，估计还要使用z-index，所以必定单独一个。
3、三个DIV，阴影一个，导航一个，上面一个。
1号最终会有6个DIV，其中要单独为一个小色条设置一个DIV，不值。2号感觉不便于将导航独立出来，最终选择3号。小色条被包含在导航DIV中，便于不考虑‘LOGO’的垂直居中问题。小色条和导航背景连在一起切为宽一象素的GIF色条水平平铺，‘LOGO’虽然是网站名，但属于表现，通过CSS手册知道背景可以不平铺，爽，于是设为背景，居中，不平铺。看了下position的属性，大概理解relative是指不浮动，顺序向下排，absolute是浮动，相对上层的定位。DIV的居中问题，查看其他代码知道是设置margin: 0 auto;
OK，写代码如下：
页面
样式表 （为了便于大家看结构，我加了黑白对比背景色）
/* -----------页眉----------- */
/* ---页头LOGO--- */
#indextop
{
height: 85px;
background-image: url(http://www.woxun.com/Files/BeyondPic/200503/20050309093104814.gif);
background-repeat: repeat-x;
background-color: #ED1C24;
}
#indextop_logo
{
position:relative;
margin:0 auto;
width:770px;
height:75px;
background-image: url(http://www.woxun.com/Files/BeyondPic/200503/20050309093104629.gif);
background-repeat: no-repeat;
background-position: center;
background-color: #000;
}
/* --- 全局导航 --- */
#indextop_globalnav
{
position: relative;
height: 43px;
padding: 1px;
background-image: url(http://www.woxun.com/Files/BeyondPic/200503/20050309093104491.jpg);
}
#indextop_globalnavmenu
{
position: relative;
margin: 0 auto;
padding: 0;
width: 770px;
height: 43px;
background-color: #000;
}
/* -----------正文上----------- */
/* ---广告条--- */
#indexcontent_shadow
{
position: absolute;
z-index: 1;
margin: 0;
padding: 0;
width: 100%;
height: 10px;
background-image: url(http://www.woxun.com/Files/BeyondPic/200503/20050309093104930.gif);
background-repeat: repeat-x;
left: 0px;
top: 130px !important;
top: 127px;
}
[height: 43px;]这里本来是45px，但设了padding之后被撑大，由此知道了padding要影响高和宽，后来知道margin和border也一样，所以有些时候要高宽设置要做相应的裁减。
好了，页头的大局搞定，现在开始做导航，先分析。
如果用表格，很简单，两行十列，spacing为3，然后就是切图，每个图片左和右多切1px背景色，做botton。但是离开表格我就不知道怎么办了，多谢阿捷的一篇文章，我学习后知道了display: block;的使用，详细用法大家可以去看阿捷的《不用表格的菜单》和手册，这里我简单说一下我的理解：许多块元素默认是垂直显示，就像你有一堆方块，你列出来交给浏览器，浏览器的显示是从上到下顺序排列，而display: block;就是让浏览器水平排列这些方块，并且，遇到所在嵌套的边界就自动换行继续排列。好，现在我就将导航中的一个栏目设置为一个方块，然后不断重复直到我有17个方块，通过设置它的宽度，让它在水平排到第十个方块时到达globalnavmenu（770px）的右边界，它就自动换行了，这样导航条就出来了。方块的宽度不用计算，直接从设计稿中取，我的设计稿是很精确的。这里有个问题，由于globalnavmenu这个div是包含了小色块，默认的垂直居中显然不行，要在白色块中垂直居中才行。（看来啊，我还是没躲过，本以为将小色块放到导航中就可以不考虑LOGO的垂直居中问题，结果还是要影响导航条的定位，而且更麻烦，印证了我常说的一句‘个人名言’：困难是躲不过的，它总是会换个时间或空间重新摆到你面前，直到你迈过它才会消失。）解决办法，很明显要使用padding或margin，我选择了对方块使用margin。这又导致新问题，第一排的margin-top明显要比第二排的大，那么就不能对17个方块使用一个样式，我解决办法是上下各一个。栏目名字顺序置于方块中，通过调整上下padding垂直居中于方块。于是代码如下：
页面
……
……
样式表
……
#indextop_globalnavmenu
{
position:relative;
margin: 0 auto;
padding: 0;
width: 770px;
height: 43px;
}
#indextop_globalnavmenu ul
{
clear: left;
margin: 0px;
padding: 0;
border: 0px;
list-style-type: none;
text-align: center;
display:inline;
}
#indextop_globalnavmenu li
{
width: 77px;
height: 17px;
float: left;
text-align: center;
margin: 0;
}
……
可以对方块加连接，就像对td加连接一样，更优越的是方块的a:hover可以定义样式，比如换方块的背景和色彩等各种样式，那太好了，以前需要用JS实现的响应mouseover事件就太简单了。（说明：翻转的图片、色彩、FLASH等都是属于表现，内容一般只有文字，所以图片应该设置成背景，这两天我看见有人在运用标准时依旧使用包含文字的图片直接做链接，这种做法是一种形似而神不是的伪标准，建议再认真读读《理解表现与结构相分离》，如果要使用字体，那么也应该将这种图片设为背景，再在相应位置隐藏相应文本。建议看看Micromedia的网站，他是怎么处理他全FLASH的页头导航？他将整个页头做了一个普通页头，然后隐藏了。浏览器不支持FLASH或文本浏览时，普通页头就出来了。）加入以下代码实现：
|
